<template>
  <el-card style="padding: 20px">
    <el-form ref="formRef" :model="form" inline>
      <el-form-item
        v-for="(
          { form_item_json: { label, prop }, component_name, component_json },
          index
        ) in form_json"
        :key="index"
        v-bind="{ label, prop }"
      >
        <component
          :is="component_name"
          v-model="form[prop]"
          v-bind="component_json"
        >
          <template v-if="component_name === 'el-select'">
            <el-option
              v-for="(i, v) in component_json.option_data"
              :key="v"
              v-bind="i"
            ></el-option>
          </template>
        </component>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="get_list"
          >搜索</el-button
        >
        <el-button size="mini" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="function" style="margin-bottom: 20px">
      <el-button
        @click="handle_add"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        plain
        >新增</el-button
      >
      <el-button
        :disabled="ids.length !== 1"
        size="mini"
        type="success"
        icon="el-icon-edit"
        plain
        @click="handle_edit(ids[0])"
        >修改</el-button
      >

      <el-button
        :disabled="!ids.length"
        size="mini"
        type="danger"
        icon="el-icon-delete"
        plain
        @click="handle_del(ids)"
        >删除</el-button
      >
      <el-button
        disabled
        size="mini"
        type="warning"
        icon="el-icon-download"
        plain
        >导出</el-button
      >
    </div>
    <el-table :data="list" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        v-for="(item, index) in list_json"
        :key="index"
        v-bind="item"
      >
        <template v-if="item.prop === 'status'" v-slot="scope">
          <el-switch
            @change="change(scope.row)"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-slot="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-full-screen"
          @click="qr_code(scope.row)"
          >餐桌二维码</el-button
        >
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handle_edit(scope.row.id)"
          >修改</el-button
        >
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handle_del(scope.row.id)"
          >删除</el-button
        >
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right; margin-top: 20px"
      background
      @size-change="
        (val) => {
          this.pager.pageSize = val;
          this.get_list();
        }
      "
      @current-change="
        (val) => {
          this.pager.pageNum = val;
          this.get_list();
        }
      "
      :current-page="pager.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.totalRow"
    >
    </el-pagination>
    <el-dialog :title="title" :visible="visible" width="30%" @close="close">
      <el-form
        ref="formEditRef"
        :model="form_edit"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item
          v-for="(
            { form_item_json: { label, prop }, component_name, component_json },
            index
          ) in form_edit_json"
          :key="index"
          v-bind="{ label, prop }"
        >
          <component
            :is="component_name"
            v-model="form_edit[prop]"
            v-bind="component_json"
          >
            <template v-if="component_name === 'el-select'">
              <el-option
                v-for="(i, v) in component_json.option_data"
                :key="v"
                v-bind="i"
              ></el-option>
            </template>
          </component>
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button type="primary" size="mini" @click="submit">确定</el-button>
          <el-button size="mini" @click="visible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-image
      ref="elImageBusiness"
      style="display: none"
      :preview-src-list="['http://8.138.102.145:8232/images' + imgUrl]"
    ></el-image>
  </el-card>
</template>

<script>
import { omit } from "lodash";
export default {
  mounted() {
    this.get_list();
  },
  data() {
    return {
      imgUrl: "",
      ids: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
        totalRow: 0,
      },
      list: [],
      list_json: [
        { label: "餐桌", prop: "name" },
        { label: "总人数", prop: "totalQuantity" },
        { label: "已用人数", prop: "usedQuantity" },
        { label: "状态", prop: "status" },
      ],
      form: {
        name: "",
        status: "",
        totalQuantity: "",
        usedQuantity: "",
      },
      form_json: [
        {
          form_item_json: { label: "餐桌", prop: "name" },
          component_name: "el-input",
          component_json: { placeholder: "餐桌", size: "small" },
        },
        {
          form_item_json: { label: "状态", prop: "status" },
          component_name: "el-select",
          component_json: {
            placeholder: "状态",
            size: "small",
            option_data: [
              { label: "启用", value: 1 },
              { label: "禁用", value: 0 },
            ],
          },
        },
        {
          form_item_json: { label: "总人数", prop: "totalQuantity" },
          component_name: "el-input",
          component_json: {
            placeholder: "总人数",
            size: "small",
            type: "number",
            min: 0,
          },
        },
        {
          form_item_json: { label: "已用人数", prop: "usedQuantity" },
          component_name: "el-input",
          component_json: {
            placeholder: "已用人数",
            size: "small",
            type: "number",
            min: 0,
          },
        },
      ],
      form_edit: {
        name: "",
        totalQuantity: "",
        status: "",
      },
      form_edit_json: [
        {
          form_item_json: { label: "餐桌", prop: "name" },
          component_name: "el-input",
          component_json: { placeholder: "餐桌", size: "small" },
        },

        {
          form_item_json: { label: "状态", prop: "status" },
          component_name: "el-select",
          component_json: {
            placeholder: "状态",
            size: "small",
            option_data: [
              { label: "启用", value: 1 },
              { label: "禁用", value: 0 },
            ],
          },
        },
        {
          form_item_json: { label: "总人数", prop: "totalQuantity" },
          component_name: "el-input",
          component_json: {
            placeholder: "总人数",
            size: "small",
            type: "number",
            min: 0,
          },
        },
        {
          form_item_json: { label: "已用人数", prop: "usedQuantity" },
          component_name: "el-input",
          component_json: {
            placeholder: "已用人数",
            size: "small",
            type: "number",
            min: 0,
          },
        },
      ],
      title: "",
      visible: false,
      rules: {
        name: [{ required: true, message: "请输入餐桌", trigger: "blur" }],
        totalQuantity: [
          { required: true, message: "请输入总人数", trigger: "blur" },
        ],
      },
      is_add: false,
    };
  },
  methods: {
    get_list() {
      this.$http
        .get("/diningTable", {
          params: {
            ...this.pager,
            ...this.form,
          },
        })
        .then((res) => {
          this.list = res.rows;
          this.pager = omit(res, ["msg", "status", "rows"]);
        });
    },
    reset() {
      this.$refs.formRef.resetFields();
      this.get_list();
    },
    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },
    handle_add() {
      this.visible = true;
      this.title = "添加餐桌";
      this.is_add = true;
    },
    handle_edit(id) {
      this.visible = true;
      this.title = "修改餐桌";
      this.is_add = false;
      Object.assign(
        this.form_edit,
        this.list.find((v) => v.id == id)
      );
    },
    handle_del(id) {
      this.$confirm("是否确认删除餐桌?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(`/diningTable${this.getIds(id)}`).then((res) => {
            if (res.status === 200) {
              this.$message.success(res.msg);
              this.get_list();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submit() {
      this.$refs.formEditRef.validate((callback) => {
        if (callback) {
          if (this.is_add) {
            this.$http.post("/diningTable", this.form_edit).then((res) => {
              if (res.status === 200) {
                this.$message.success(res.msg);
                this.visible = false;
                this.get_list();
              }
            });
          } else {
            this.$http.put("/diningTable", this.form_edit).then((res) => {
              if (res.status === 200) {
                this.$message.success(res.msg);
                this.visible = false;
                this.get_list();
              }
            });
          }
        }
      });
    },
    close() {
      this.$refs.formEditRef.resetFields();
      this.form_edit = {
        name: "",
        totalQuantity: "",
        status: "",
        usedQuantity: "",
      };
      this.visible = false;
    },
    change(val) {
      this.$http.put("/diningTable", val);
    },
    getIds(ids) {
      if (Array.isArray(ids)) {
        if (ids.length > 0) {
          const params = new URLSearchParams();
          ids.forEach((id) => {
            params.append("id", id);
          });
          ids = params.toString();
        } else {
          ids = "";
        }
        return `?${ids}`;
      } else {
        return `?id=${ids}`;
      }
    },
    qr_code(row) {
      if (row.img) {
        this.imgUrl = row.img;
        this.$refs.elImageBusiness.showViewer = true;
      } else {
        let result = new FormData();
        result.append("tableId", row.id);
        result.append("content", "http://124.70.211.219:8234/#login");
        this.$http.post("/upload/qrCode", result).then((res) => {
          this.imgUrl = res.data;
          this.$refs.elImageBusiness.showViewer = true;
          this.get_list()
        });
      }
    },
  },
};
</script>

<style style="scss">
.el-table__header th {
  background-color: #f8f8f9 !important;
  color: #515a6e;
}
</style>
